<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>登录若依系统</title>
    <meta name="description" content="若依后台管理框架">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.css" th:href="@{/css/style.css}" rel="stylesheet"/>
    <link href="../static/css/login.min.css" th:href="@{/css/login.min.css}" rel="stylesheet"/>
    <link href="../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css?v=4.5.1}" rel="stylesheet"/>
    <!-- 360浏览器急速模式 -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{favicon.ico}"/>
    <style type="text/css">label.error { position:inherit;  }</style>
    <script>
        if(window.top!==window.self){alert('未登录或登录超时。请重新登录');window.top.location=window.location};
    </script>
</head>
<body class="signin">
    <div class="signinpanel">
        <div class="row">
            <div class="col-sm-7">
                <div class="signin-info">
                    <div class="logopanel m-b">
                        <h1><img alt="[ 若依 ]" src="../static/ruoyi.png" th:src="@{/ruoyi.png}"></h1>
                    </div>
                    <div class="m-b"></div>
                    <h4>欢迎使用 <strong>若依 后台管理系统</strong></h4>
                    <ul class="m-b">
                        <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> SpringBoot</li>
                        <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Mybatis</li>
                        <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Shiro</li>
                        <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Thymeleaf</li>
                        <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Bootstrap</li>
                    </ul>
                    <strong th:if="${@config.getKey('sys.account.registerUser')}">还没有账号？ <a th:href="@{/register}">立即注册&raquo;</a></strong>
                </div>
            </div>
            <div class="col-sm-5">
                <form id="signupForm" autocomplete="off">
                    <h4 class="no-margins">登录：</h4>
                    <p class="m-t-md">你若不离不弃，我必生死相依</p>
                    <input type="text"     name="username" class="form-control uname"     placeholder="用户名" value="admin"    />
                    <input type="password" name="password" class="form-control pword"     placeholder="密码"   value="admin123" />
					<div class="row m-t" th:if="${captchaEnabled==true}">
						<div class="col-xs-6">
						    <input type="text" name="validateCode" class="form-control code" placeholder="验证码" maxlength="5" />
						</div>
						<div class="col-xs-6">
							<a href="javascript:void(0);" title="点击更换验证码">
								<img th:src="@{captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%"/>
							</a>
						</div>
					</div>
                    <div class="checkbox-custom" th:classappend="${captchaEnabled==false} ? 'm-t'">
				        <input type="checkbox" id="rememberme" name="rememberme"> <label for="rememberme">记住我</label>
				    </div>
                    <button class="btn btn-success btn-block" id="btnSubmit" data-loading="正在验证登录，请稍后...">登录</button>
                </form>
            </div>
        </div>
        <div class="signup-footer">
            <div class="pull-left">
                &copy; 2019 All Rights Reserved. RuoYi <br>
            </div>
        </div>
    </div>
<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; </script>
<!-- 全局js -->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<!-- 验证插件 -->
<script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script src="../static/ajax/libs/validate/messages_zh.min.js" th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.5.1}"></script>
<script src="../static/ruoyi/login.js" th:src="@{/ruoyi/login.js}"></script>
</body>
</html>
<!--<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>录音并传递给后台</title>
    &lt;!&ndash;<script type="text/javascript" src="../../../../resources/static/js/liveplayer/dist/element/liveplayer-element.min.js"></script>&ndash;&gt;
    <th:block th:include="include :: header('测试liveplayer管理')" />
    <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.min.js"></script>
</head>
<body>
<button id="intercomBegin">开始对讲</button>
<button id="intercomEnd">关闭对讲</button>

<div class="mainContainer" style="width: 30%;height: 30%">
    <video id="videoElement" controls autoplay>
        Your browser is too old which doesn't support HTML5 video.
    </video>
</div>
<br>
<div class="controls">
    &lt;!&ndash;<button onclick="flv_load()">加载</button>&ndash;&gt;
    <button onclick="flv_start()">开始</button>
    <button onclick="flv_pause()">暂停</button>
    <button onclick="flv_destroy()">停止</button>
    <input style="width:100px" type="text" name="seekpoint" />
    <button onclick="flv_seekto()">跳转</button>
</div>

<div id="player01" style="width: 400px;height: 400px;">
    &lt;!&ndash;<live-player id="player02" video-url="rtmp://58.200.131.2:1935/livetv/hunantv" live="true" stretch="true"></live-player>&ndash;&gt;
</div>
<div style="width: 30%;height: 30%;">
    &lt;!&ndash;<live-player video-url="http://192.168.1.117:10086/live?port=1989&app=live&stream=mystream" live="true"></live-player>&ndash;&gt;
    <live-player video-url="http://192.168.109.103:10086/flv?port=1989&app=live&stream=mystream" live="true"></live-player>
</div>

&lt;!&ndash;<script>
    window.onload = function () {
        // 页面加载完成以后执行
        // JavaScript 交互示例, 需要将页面代码放到 http web server 容器下, 通过浏览器 http 协议访问
        var player = document.getElementById('player02');
        player.addEventListener('snapOutside', evt => {
            console.log('获取快照 base64 数据', evt.detail[0]);
    });
        setTimeout(() => {
            console.log("快照, 回调 snapOutside...");
        player.getVueInstance().snap();
        console.log("静音...");
        player.getVueInstance().setMuted(true);
        console.log("静音状态: " + player.getVueInstance().getMuted());
        console.log("暂停...");
        player.getVueInstance().pause();
        console.log("暂停状态: " + player.getVueInstance().paused());
        console.log("全屏状态: " + player.getVueInstance().isFullscreen());
        //触发全屏, 需要放置到交互事件回调中
        //btn.onclick = () => { player.getVueInstance().requestFullscreen(); }
        player.getVueInstance().setMuted(false);
        console.log("音量: " + player.getVueInstance().getVolume());
        player.getVueInstance().setVolume(0.5);
        console.log("音量1: " + player.getVueInstance().getVolume());
        player.getVueInstance().setVolume(0.3);
        console.log("音量2: " + player.getVueInstance().getVolume());
    }, 3000);
        setTimeout(() => {
            console.log("放音...");
        player.getVueInstance().setMuted(false);
        console.log("静音状态: " + player.getVueInstance().getMuted());
        console.log("播放...");
        player.getVueInstance().play();
        console.log("暂停状态: " + player.getVueInstance().paused());
    }, 6000);
        setTimeout(() => {
            console.log("切换媒体源...");
        player.setAttribute("video-url", "http://192.168.1.117:10086/live?port=1989&app=live&stream=mystream");
    }, 9000);
    }
</script>&ndash;&gt;
<script th:src="@{/js/liveplayer/dist/element/liveplayer-element.min.js}"></script>
<script th:src="@{/js/ckplayer/ckplayerx/ckplayer.js}"></script>
<th:block th:include="include :: footer" />
</body>
<script type="text/javascript">
    var socket;

    function openSocket() {
        if (typeof (WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        } else {
            console.log("您的浏览器支持WebSocket");
            //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
            //等同于socket = new WebSocket("ws://localhost:8888/xxxx/im/25");
            //var socketUrl="${request.contextPath}/im/"+$("#userId").val();
            // var socketUrl = "http://localhost:8333/websocket/imserver/" + idNum;
            // var socketUrl = "http://192.168.1.112:8333/websocket/imserver/" + idNum;

            var socketUrl = "http://192.168.0.205:8085/websocket/imserver/" + "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJndWxpLXVzZXIiLCJpYXQiOjE2MjMyOTM5MTMsImV4cCI6MTYyMzM4MDMxMywiYWNjb3VudCI6IiJ9.-ANslnJ41cCJEyUenAxOtDlbOnatuKoZsMWqZ0ITfo0";
            // var socketUrl = "http://210.22.126.170:8333/websocket/imserver/" + idNum;
            // var socketUrl = "http://192.168.1.106:7777/ws";
            socketUrl = socketUrl.replace("https", "ws").replace("http", "ws");
            console.log(socketUrl);
            if (socket != null) {
                socket.close();
                socket = null;
            }
            socket = new WebSocket(socketUrl);
            //打开事件
            socket.onopen = function () {
                console.log("websocket已打开");
                //socket.send("这是来自客户端的消息" + location.href + new Date());
            };
            //获得消息事件
            socket.onmessage = function (msg) {
                console.log(msg.data);
                //发现消息进入    开始处理前端触发逻辑
                // 展示数据
                // showDistanceByIp(msg.data)
            };
            //关闭事件
            socket.onclose = function () {
                console.log("websocket已关闭");
            };
            //发生了错误事件
            socket.onerror = function () {
                console.log("websocket发生了错误");
            }
        }
    }

    function sendMessage() {
        if (typeof (WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        } else {
            console.log("您的浏览器支持WebSocket");
            console.log('{"toUserId":"' + $("#toUserId").val() + '","contentText":"' + $("#contentText").val() + '"}');
            socket.send('{"toUserId":"' + $("#toUserId").val() + '","contentText":"' + $("#contentText").val() + '"}');
        }
    }

    openSocket();
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            isLive: true,//<====加个这个
            cors: true,
            enableWorker: false,
            enableStashBuffer: false,
            stashInitialSize: 128,
            autoCleanupSourceBuffer:true,
            // lazyLoadMaxDuration: 3 * 60,
            seekType: 'range',
            hasVideo: true,
            hasAudio: false,
            // url: 'http://192.168.1.117:10086/live?port=1989&app=live&stream=mystream'//<==自行修改
            // url: 'http://192.168.109.103:10086/flv?port=1989&app=live&stream=mystream'//<==自行修改
            // url: 'http://192.168.0.187:10086/live?port=1989&app=live&stream=mystream'//<==自行修改
            url: 'http://106.12.184.132:10086/live?port=1986&app=live&stream=mystream'//<==自行修改

        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
    }

    function flv_start() {
        flvPlayer.play();
    }

    function flv_pause() {
        flvPlayer.pause();
    }

    function flv_destroy() {
        flvPlayer.pause();
        flvPlayer.unload();
        flvPlayer.detachMediaElement();
        flvPlayer.destroy();
        flvPlayer = null;
    }

    function flv_seekto() {
        flvPlayer.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
    }

    // $.modal.open('视频播放', 'http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4', 600, 400);
    // $(".liveWeb").append('<div id="video1" style="width: 32.8%;height: 33%;position: relative;border:0px;padding:0px;margin:0px;display: inline-block;">暂无视频</div>');
    //九宫格播放器
    var videoObject = {
        container: '#player01',//“#”代表容器的ID，“.”或“”代表容器的class
        variable: 'player',//该属性必需设置，值等于下面的new chplayer()的对象
        autoplay:true,//自动播放
        live:true,//直播视频形式
        // video:'rtmp://192.168.1.105:1935/mylive/test2'//视频地址
        // video:'http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4/'//视频地址
        // video:'http://192.168.1.117:10086/hls/mystream/index.m3u8'//视频地址
        video:'http://192.168.109.103:10086/flv?port=1989&app=live&stream=mystream'//视频地址
        // video:'http://192.168.1.235:8888/group1/M00/00/00/wKgB61_RdduAZ_TKCfCzDmE5Qbw0807571'//视频地址
    };
    var player = new ckplayer(videoObject);

    //websocket
    var begin = document.getElementById('intercomBegin');
    var end = document.getElementById('intercomEnd');

    var ws = null; //实现WebSocket
    var record = null; //多媒体对象，用来处理音频

    function init(rec) {
        record = rec;
    }

    //录音对象
    var Recorder = function(stream) {
        var sampleBits = 16; //输出采样数位 8, 16
        var sampleRate = 16000; //输出采样率
        var context = new AudioContext();
        var audioInput = context.createMediaStreamSource(stream);
        var recorder = context.createScriptProcessor(4096, 1, 1);
        var audioData = {
            size: 0, //录音文件长度
            buffer: [], //录音缓存
            inputSampleRate: 48000, //输入采样率,网页默认的采样率即为48000
            inputSampleBits: 16, //输入采样数位 8, 16
            outputSampleRate: sampleRate, //输出采样数位
            oututSampleBits: sampleBits, //输出采样率
            clear: function() {
                this.buffer = [];
                this.size = 0;
            },
            input: function(data) {
                this.buffer.push(new Float32Array(data));
                this.size += data.length;
            },
            compress: function() { //合并压缩
                //合并
                var data = new Float32Array(this.size);
                var offset = 0;
                for (var i = 0; i < this.buffer.length; i++) {
                    data.set(this.buffer[i], offset);
                    offset += this.buffer[i].length;
                }
                //压缩
                var compression = parseInt(this.inputSampleRate / this.outputSampleRate);
                var length = data.length / compression;
                var result = new Float32Array(length);
                var index = 0,
                    j = 0;
                while (index < length) {
                    result[index] = data[j];
                    j += compression;
                    index++;
                }
                return result;
            },
            encodePCM: function() { //这里不对采集到的数据进行其他格式处理，如有需要均交给服务器端处理。
                var sampleRate = Math.min(this.inputSampleRate, this.outputSampleRate);
                var sampleBits = Math.min(this.inputSampleBits, this.oututSampleBits);
                var bytes = this.compress();
                var dataLength = bytes.length * (sampleBits / 8);
                var buffer = new ArrayBuffer(dataLength);
                var data = new DataView(buffer);
                var offset = 0;
                for (var i = 0; i < bytes.length; i++, offset += 2) {
                    var s = Math.max(-1, Math.min(1, bytes[i]));
                    data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
                }

                return new Blob([data]);
            }

        };

        var sendData = function() { //对以获取的数据进行处理(分包)
            var reader = new FileReader();
            reader.onload = e => {
                var outbuffer = e.target.result;
                //ws.send(outbuffer);
                //console.log(outbuffer);
                var arr = new Int8Array(outbuffer);
                if (arr.length > 0) {
                    //var tmparr = new Int8Array(arr.length);
                    //ws.send(tmparr);
                    var tmparr = new Int8Array(640);
                    console.log(tmparr);
                    var j = 0;
                    for (var i = 0; i < arr.byteLength; i++) {
                        tmparr[j++] = arr[i];
                        if (((i + 1) % 640) == 0) {
                            ws.send(tmparr);
                            if (arr.byteLength - i - 1 >= 640) {
                                tmparr = new Int8Array(640);
                            } else {
                                tmparr = new Int8Array(arr.byteLength - i - 1);
                            }
                            j = 0;
                        }
                        if ((i + 1 == arr.byteLength) && ((i + 1) % 640) != 0) {
                            ws.send(tmparr);
                        }
                    }
                }
            };
            reader.readAsArrayBuffer(audioData.encodePCM());
            audioData.clear();//每次发送完成则清理掉旧数据
        };

        this.start = function() {
            audioInput.connect(recorder);
            recorder.connect(context.destination);
        }

        this.stop = function() {
            recorder.disconnect();
        }

        this.getBlob = function() {
            return audioData.encodePCM();
        }

        this.clear = function() {
            audioData.clear();
        }

        recorder.onaudioprocess = function(e) {
            var inputBuffer = e.inputBuffer.getChannelData(0);
            audioData.input(inputBuffer);
            sendData();
        }
    }

    /*
    * WebSocket
    */
    function useWebSocket() {
        ws = new WebSocket("wss://192.168.1.117:8333/websocket/imserver/10000");
        ws.binaryType = 'arraybuffer'; //传输的是 ArrayBuffer 类型的数据
        ws.onopen = function(event) {
            console.log('握手成功');
            timeInte=setInterval(function(){
                //if (ws.readyState == 1) { //ws进入连接状态，则每隔180毫秒发送一包数据
                record.start();
                //}
            },180);

            //clearInterval(timeInte);
        };

        ws.onmessage = function(msg) {
            console.info(msg)
        }

        ws.onerror = function(err) {
            console.info(err)
        }
    }

    /*
    * 开始对讲
    */
    begin.onclick = function() {
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

        if (!navigator.getUserMedia) {
            alert('浏览器不支持音频输入');
        } else {
            navigator.getUserMedia({
                    audio: true
                },
                function(mediaStream) {
                    init(new Recorder(mediaStream));
                    console.log('开始对讲');
                    useWebSocket();
                },
                function(error) {
                    console.log(error);
                    switch (error.message || error.name) {
                        case 'PERMISSION_DENIED':
                        case 'PermissionDeniedError':
                            console.info('用户拒绝提供信息。');
                            break;
                        case 'NOT_SUPPORTED_ERROR':
                        case 'NotSupportedError':
                            console.info('浏览器不支持硬件设备。');
                            break;
                        case 'MANDATORY_UNSATISFIED_ERROR':
                        case 'MandatoryUnsatisfiedError':
                            console.info('无法发现指定的硬件设备。');
                            break;
                        default:
                            console.info('无法打开麦克风。异常信息:' + (error.code || error.name));
                            break;
                    }
                }
            )
        }
    }

    /*
    * 关闭对讲
    */
    end.onclick = function() {
        if (ws) {
            ws.close();
            record.stop();
            console.log('关闭对讲以及WebSocket');
        }
    }

</script>
</html>-->
